import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import Recommend from './Recommend'
import Ranking from './Ranking'
import SongList from './SongList'
import './findmusic.scss'

export default function FindMusic() {
  return (
    <div className='findmusic d-flex'>
      <ul className='nav flex-column bg-light me-3'>
        <li className='nav-item'>
          {/* //!二级路由入口的指定一定记得把一级路由的地址带上 */}
          <NavLink
            className='nav-link'
            aria-current='page'
            to='/findmusic/recommend'
          >
            推荐
          </NavLink>
          {/* 可以去掉 / 开头，表示会自动拼接上父路由地址 */}
          {/* <NavLink
            className='nav-link'
            aria-current='page'
            to='recommend'
          >
            推荐
          </NavLink> */}
        </li>
        <li className='nav-item'>
          <NavLink className='nav-link' to='/findmusic/ranking'>
            排行榜
          </NavLink>
        </li>
        <li className='nav-item'>
          <NavLink className='nav-link' to='/findmusic/songlist'>
            歌单
          </NavLink>
        </li>
      </ul>
      <div className='flex-grow-1'>
        {/* //!Switch 提高性能，一旦匹配就不再继续了 */}
        <Switch>
          {/* exact 一定要加，表示精确匹配，必须是 /findmusic 才会进行重定向 */}
          <Redirect from='/findmusic' to='/findmusic/recommend' exact />
          <Route path='/findmusic/recommend' component={Recommend} />
          <Route path='/findmusic/ranking' component={Ranking} />
          <Route path='/findmusic/songlist' component={SongList} />
        </Switch>
      </div>
    </div>
  )
}
